<template>
<div :class="['get-box', listStatus]">
  <h2></h2>
  <div 
    class="get-time"
    @click="showCalendar">{{year}}-{{month}}-{{date}}</div>
  <div class="get-list">
    <ul v-for="(o, i) of list">
      <li>
        <b>时间</b>
        <span>{{(new Date(o.timestamp)).toLocaleTimeString()}}</span>
      </li>
      <li v-for="(_o, j) of o.content">
        <b>{{_o.text}}</b>
        <span>{{_o.value}}</span>
      </li>
    </ul>
  </div>
  <div class="calendar-box" v-if="calendarShown">
    <Calendar
      :callback="{ ok : setDate, no : hideCalendar }"
      :outTime="{ year, month, date }"></Calendar>
  </div>
</div>
</template>

<script>
import ajaks from 'ajaks';
import Calendar from './calendar';

const _d = new Date();

export default {
  components : {
    Calendar,
  },
  data () {
    return {
      year : _d.getFullYear(),
      month : _d.getMonth() + 1,
      date : _d.getDate(),
      list : [],
      listStatus : 'loading',
      calendarShown : false,
    };
  },
  beforeMount () {
    this.request();
  },
  methods : {
    request () {
      ajaks.get('/api/get', {
        year : this.year,
        month: this.month,
        date: this.date,
      }).then(data => {
        if (data.code !== 0)  { this.nodata(); return; }
        if (!data)            { this.nodata(); return; }
        if (!data.rs)         { this.nodata(); return; }
        if (!data.rs.length)  { this.nodata(); return; }
        this.list = data.rs;
        this.listStatus = '';
      }).catch(e => console.log(e));
    },
    nodata () {
      this.list = [];
      this.listStatus = 'nodata';
    },
    showCalendar () { this.calendarShown = true; },
    hideCalendar () { this.calendarShown = false; },
    setDate (o) {
      this.hideCalendar();
      if (this.year === o.year && this.month === o.month && this.date === o.date) return;
      this.year  = o.year;
      this.month = o.month;
      this.date  = o.date;
      this.request();
    },
  },
};
</script>

<style lang="scss" scoped>
.get-box{
  position:relative;
  width:100%; height:100%;
  overflow-x:hidden; overflow-y:scroll;
  &.loading:after,
  &.nodata:after {
    position:absolute;
    left:0; right:0; top:0; bottom:0;
    width:100%; height:2rem; margin:auto;
    line-height:2rem; text-align:center;
    color:#808080;
  }
  &.loading:after{content:'加载中..';}
  &.nodata:after {content:'无数据..';}
}
.get-time {
  padding:1rem; padding-top:0; 
  line-height:4rem; text-align:center;
}
.get-list {
  padding:0 1rem;
  & > ul {margin-bottom:1rem;}
  b {font-weight:bold;}
}
.calendar-box {
  position:absolute; z-index:1;
  top:0; left:0;
  width:100%; height:100%;
  background:white;
}
</style>
